<template>
    <div class="content">
        
    <div class="top" style="height: 36px;width: 60%; margin:10px 20% 0px 20%;">
       <div class="imageContainer" style="height: 36px;">
            <el-image style="height: 100%;" src="../../../public/images/Logo/FB_text.jpg"></el-image>
       </div>
    </div>

    <div class="middle" style="height:620px;">
        <el-card style="width: 60%;height: 100%;margin:0 20% 0 20%;">
            <div class="middleTop"  style="height: 66px;margin: 0 5% 0 5%; border-bottom:0.1px gray solid ;
            display: flex;justify-content: center;align-items: center;">
                <b style="font-size: 24px;">销户</b>
            </div>
            <div class="middleContent" style="padding:0 25% 0 25%; height: 400px;">
                <div style="display: flex; flex-direction: column;">
                    <span style="font-size: 18px; margin-top:40px">输入您的账号密码</span>
                    <span style="margin-top:24px">输入帐号 {{email}} 的密码</span>
                </div>
                <div style="display: flex;
                flex-direction: column;justify-content: center;
                align-items: center; margin-top:80px;">
                    <el-input v-model="password" style="height: 45px;font-size: 14px; " type="password" placeholder="请输入密码" show-password></el-input>
                    <a href="" style="font-size: 18px; color:#2d7dfd; margin-top:28px;">忘记密码</a>
                </div>
            </div>
            <div class="middleBottom"  style="height: 10%;padding:0 25% 0 25% ;display: flex;
            justify-content: center;align-items: center; " >
               <el-button style="height: 42px; width:160px ;
                border: 0.667px black solid; margin-right: 8%;
                border-radius: 24px;" @click="backButton">
                <span style="color:#2d7dfc; font-size:18px">取消</span>
            </el-button>
               <el-button :disabled="!password" style="height: 42px; width:160px ;
                border: 0.667px black solid; margin-left: 8%;
                border-radius: 24px;" @click="open">
                <span style="color:#2d7dfc; font-size:18px" v-if="password">确认</span>
                <span style="color:#aac9f9; font-size:18px"  v-else>确认</span>
            </el-button>
            </div>
        </el-card>
    </div>
        <div class="bottom" style="position: fixed;bottom: 0;left: 0;width: 100%;" >
            <footer0></footer0>
        </div>

    </div>
</template>
<script setup>
import {ref } from 'vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/pinia'
import { watchEffect } from 'vue';  
const userStore = useUserStore()
const user = computed(() => userStore.loginUser);  
watchEffect(() => {  
});

let email = ref ('3044258526@qq.com')
let password = ref ('')

const backButton = () =>{
    router.push('/accountInformation')
}


const open = () => {
  ElMessageBox.confirm(
    '一旦销户此账号无法登录，您确定要销户吗哈哈?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '销户成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '您已取消销户',
      })
    })
}
</script>

<style scoped lang="scss">
*{
    border:0px;
    padding:0px;
    box-sizing:border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}
.content{
    .middleContent{
        ::v-deep .el-input__wrapper {
        background-color: #f2f4f7;
        border-radius: 5px;
        border: 1px solid #dcdfe6; 
        border-radius: 24px;
        }
    }

}
</style>